<template>
    <div id="tmpl">
        <div class="row" v-for="(item,index) in datalist">
                <mt-switch class="switch" v-model="value[index]"  ></mt-switch>
                <img class="img" :src="item.thumb_path" alt="商品图片" >
                <div class="inforight">
                    <h4 v-text="item.title"></h4>
                    <div class="bottom">
                        <ul>
                            <li>
                                ￥{{item.sell_price}}
                            </li>
                            <li><carinputnumber :initCount="item.cou" :goodsid="item.id" v-on:cardataobj="getInputNumber"></carinputnumber >   </li>
                            <li><a href="javascript:;" @click="delrow(index,item.id)">删除</a></li>
                        </ul>
                    </div>
                </div>
        </div>
        <div id="total">
            <div class="desc">
                <ul>
                    <li>总计(不含运费)</li>
                    <li>已勾选商品{{totalCount}}件，总价:￥{{totalAmount}}元</li>
                </ul>
            </div>
            <div id="button">
                <mt-button type="danger" size="small"> 去结算</mt-button>
            </div>
        </div>
    </div>
</template> 

<script>
import {getgoodsObj,updateData,removeItem} from '../../kits/localSg.js';
import common from '../../kits/common';
import {Toast} from 'mint-ui';
import carinputnumber from '../subcom/carinputNumber.vue';
export default {
    components:{
        carinputnumber
    },
    computed:{
       totalCount(){
           // 只需要计算出this.value数组中的ture值有多少个即可
           var trueArr = this.value.filter(function(item){
               return item;
           });
           // 计算总价格：购买数量*商品的单价(两个值均从this.datalist中来)
           var amount = 0;
           this.value.forEach((item,index)=>{
               //判断当前item如果为ture，则这个商品的总价格是要计算的
               if(item){
                   var count = this.datalist[index].cou;
                   var price = this.datalist[index].sell_price;
                   var itemamount = count*price
                   amount +=itemamount;
               }
           })
           this.totalAmount = amount;
            return trueArr.length;
       } 
    },
  data(){
      return{
          value:[],
          datalist:[

          ],
          totalAmount:0 //总价格
      }
  },
  created(){
      this.getdatalist();
  },  
  methods:{
      delrow(index,goodsid){
          //1.0将this.value数组中的index这个位置的值移除
          this.value.splice(index,1);
          //2.0将this.datalist中的index这个位置的值移除
          this.datalist.splice(index,1);
          //3.0将localStroage中的goodsid对应的所有值移除
          removeItem(goodsid);
      },
      getdatalist(){
          var obj = getgoodsObj();
          var idstring = '';
          for(var key in obj){
             idstring+=key+',' ;
          }
          idstring = idstring.substring(0,idstring.length-1);
          var url =common.apidomain+'/api/goods/getshopcarlist/'+idstring;
           this.$http.get(url).then(function(res){
               if(res.body.status!=0){
                   Toast(res.body.message);
                   return;
               }
               //将localStorage中所有商品对应的count值赋值给mesaage中每个对象的cou
               res.body.message.forEach((item)=>{
                   item.cou = obj[item.id]
                   this.value.push(false)
               });
               this.datalist = res.body.message;

           })
      },
      //获取数量组件选中的内容.
      getInputNumber(resObj){
          //1.0更新localStorage中的数据
          updateData(resObj);
          //2.0更新this.datalist中的当前数量
              for(var i =0 ;i<this.datalist.length;i++){
                  if(this.datalist[i].id == resObj.goodsid){
                      if(resObj.type == 'add'){
                          this.datalist[i].cou = this.datalist[i].cou+1;
                      }else{
                          this.datalist[i].cou = this.datalist[i].cou-1;
                      }
                      break;
                  }
              }
      }
  }
}
</script>

<style scoped>
.row{
    border-bottom: 1px solid rbga(0,0,0,.3);
    height: 102px;
    display: flex;
    padding: 5px;
}
.switch{
    flex: 0 0 52px
}
.img{
    width: 75px;
    height: 75px;
    flex: 0 0 85px;
    margin-left: 5px;
}
.inforight{
    margin-left: 5px;
    flex: 1;
}
.inforight ul{
    padding-left: 0px;
}
.inforight li{
    list-style: none;
    display: inline-block;
}
.inforight h4{
    color:#0094ff;
    font-size: 14px;
}
.bottom li:first-child{
    color: red;
    margin-right: 5px;
}
.bottom li:last-child{
    margin-left: 5px;
}
#total{
    background-color: rgba(0,0,0,.1);
    height: 100px;
    display: flex;
    padding: 5px;
}
#total ul{
    padding-left: 0px;
}
#total li{
    list-style: none;
    font-size: 14px;
}
.desc{
   flex:1;
}
#button{
    flex:0 0 60px;
    margin:30px 0 0 0;
}
</style>
